<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <jeepay-text-up v-model:value="vdata.searchData.appId" :placeholder="'应用AppId'" />
        <jeepay-text-up v-model:value="vdata.searchData.appName" :placeholder="'应用名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="appId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_MCH_APP_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'appId'">
            <b>{{ record.appId }}</b>
          </template> <!-- 自定义插槽 -->
          <template v-if="column.key == 'state'">
            <a-badge :status="record.state === 0?'error':'processing'" :text="record.state === 0?'禁用':'启用'" />
          </template>

          <template v-if="column.key === 'defaultFlag'">
            <a-badge :status="record.defaultFlag === 0?'error':'processing'" :text="record.defaultFlag === 0?'否':'是'" />
          </template>

          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_APP_EDIT')" type="link" @click="editFunc(record.appId)">修改</a-button>
              <!-- <a-button v-if="userStore.userInfo.mchType == '2' && $access('ENT_MCH_APP_PAY_CONFIG')" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, true)">小程序支付配置</a-button> -->
              <a-button v-if="userStore.userInfo.mchType == '1' && $access('ENT_MCH_APP_PAY_CONFIG')" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, false)">oauth2</a-button>
              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG')" type="link" @click="showPayIfConfigList(record.appId)">支付配置</a-button>
              <a-button v-if="$access('ENT_MCH_APP_SIGN')" type="link" @click="signFunc(record.appId)">签名配置</a-button>
              <a-button v-if="$access('ENT_MCH_PAY_TEST')" type="link">
                <router-link :to="{name:'ENT_MCH_PAY_TEST', params:{appId:record.appId}}">
                  支付测试
                </router-link>
              </a-button>
              <a-button v-if="$access('ENT_MCH_TRANSFER')" type="link">
                <router-link :to="{name:'ENT_MCH_TRANSFER', params:{appId:record.appId}}">
                  发起转账
                </router-link>
              </a-button>
              <a-button v-if="$access('ENT_MCH_APP_DEL')" type="link" style="color: red" @click="delFunc(record.appId)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增应用  -->
    <MchAppAddOrEdit ref="mchAppAddOrEdit" :callbackFunc="searchFunc" />
    <!-- 签名配置 -->
    <MchAppSignConfig ref="mchAppSignConfig" :callbackFunc="searchFunc" />

    <!-- 费率配置页面  -->
    <JeepayPayConfigDrawer ref="jeepayPayWayFeeConfigDrawer" :configMode=" userStore.userInfo.mchType == '1' ? 'mchSelfApp1' : 'mchSelfApp2' " />

    <!-- oauth2配置  -->
    <JeepayOauth2ConfigDrawer ref="jeepayOauth2ConfigDrawer" configMode="mchSelfApp1" />
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import { API_URL_MCH_APP, req } from '@/api/manage'
import MchAppAddOrEdit from './AddOrEdit.vue'
import MchAppSignConfig from './SignConfig.vue'
import {ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useUserStore } from '@/store/modules/user'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// store对象
const userStore = useUserStore()

const jeepayOauth2ConfigDrawer = ref()

// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  { key: 'appId', fixed: 'left', title: '应用AppId', },
  { key: 'appName', title: '应用名称', dataIndex: 'appName' },
  { key: 'state', title: '状态',},
  { key: 'defaultFlag', title: '默认',},
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt',},
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

  const jeepayPayWayFeeConfigDrawer = ref()
  const mchAppAddOrEdit = ref()
  const mchAppSignConfig = ref()
  const infoTable = ref()

  const vdata = reactive({
    btnLoading: false,
    tableColumns: tableColumns,
    searchData: {} as any
  })

  function  queryFunc () {
    vdata.btnLoading = true
    infoTable.value.refTable(true)
  }

  // 请求table接口数据
  function reqTableDataFunc(params){
    return req.list(API_URL_MCH_APP, params)
  }

  function searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  function addFunc() { // 业务通用【新增】 函数
    mchAppAddOrEdit.value.show()
  }

  function editFunc (recordId) { // 业务通用【修改】 函数
    mchAppAddOrEdit.value.show(null, recordId)
  }

  function signFunc (recordId) { // 业务通用【修改】 函数
    mchAppSignConfig.value.show(recordId)
  }

  function delFunc (appId) { 
    $infoBox.confirmDanger('确认删除？', '', () => {
      req.delById(API_URL_MCH_APP, appId).then(res => {
        $infoBox.message.success('删除成功！')
        searchFunc()
      })
    })
  }

  function showPayIfConfigList(recordId) { // 支付参数配置
    jeepayPayWayFeeConfigDrawer.value.show(recordId)
  }
 
</script>

<style lang="less" scoped>
</style>
